﻿﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="fhdb" content="true">
    <title>百瑞花苑-注册账号</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="${re.contextPath}/ftl/css/style.css?v=2021">
    <link rel="stylesheet" href="${re.contextPath}/ftl/css/bootstrapValidator.css" />
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<!--    <script type="text/javascript" src="../jquery/jquery-1.10.2.min.js"></script>-->
    <script src="${re.contextPath}/ftl/jquery/jquery.form.min.js"></script>
    <script type="text/javascript" src="${re.contextPath}/ftl/jquery/bootstrap.min.js"></script>
    <script type="text/javascript" src="${re.contextPath}/ftl/jquery/bootstrapValidator.js"></script>
</head>



<style>

    .bv-form .help-block {
        margin-bottom: 0;
    }
    .nav-tabs li.bv-tab-success > a {
        color: #3c763d;
    }
    .nav-tabs li.bv-tab-error > a {
        color: #a94442;
    }

    *{ margin:0; padding:0}
    ul li{ list-style:none}
    .clear{ clear:both}
    a{ text-decoration:none; color:#666}
    img{ max-height:100%; max-width:100%; border:0}
    html,body{ font-size:100%;width:100%; height:100%}
    body{ width:100%; max-width:640px; margin:0 auto;color:#666;background:#fff;font-size:12px; overflow-x:hidden}
    p{text-align:justify}
    .hbox{ width:100%; height:90px; overflow:hidden}
    .hbox1{ width:100%; height:50px; overflow:hidden}


    .bannerBox{ width:100%; overflow:hidden}
    .bannerBox img{ display:block; width:100%}

    .topBox{ width:100%; overflow:hidden}
    .topBox img{ display:block; width:100%}

    .partBOx_1{ width:100%; overflow:hidden}
    .partBOx_1 .tit{ height:40px; line-height:40px; font-size:14px; padding:0 10px;}
    .partBOx_1 .tit img{ display:block; float:left; height:14px; margin-top:13px; margin-right:5px;}
    .partBOx_1 .tit p{ float:left; width:70%; border-left:1px solid #eee; padding-left:5px; height:14px; line-height:14px; margin-top:13px}
    .partBOx_1 ul{ padding:0 10px 10px; overflow:hidden}
    .partBOx_1 ul li{ width:21%; margin:2%; float:left}
    .partBOx_1 ul li img{ display:block; width:50px; height:50px; margin:0 auto}
    .partBOx_1 ul li p{ text-align:center; height:30px; line-height:30px;}

    .partBOx_2{width:100%; overflow:hidden}
    .partBOx_2 ul{padding:0 10px 10px; overflow:hidden}
    .partBOx_2 ul li{ float:left; margin-right:2.66%; width:23%}
    .partBOx_2 ul li:nth-child(4){ margin-right:0}
    .partBOx_2 ul li img{ display:block; width:100%}

    .partBOx_2 .pro{ padding:0 10px 10px; overflow:hidden}
    .partBOx_2 .pro img{ display:block; width:100%;}

    .contitbox{ height:42px; padding:0 10px; line-height:42px;}
    .contitbox .icon{ float:left; display:block; height:20px; margin-top:11px;}
    .contitbox p{ float:left; width:50%;}
    .contitbox .more{ display:block; float:right;height:20px; margin-top:11px;}

    .mbox{ width:100%; height:5px; background:#F3F3F3}

    .confbox{ height:55px; background:#F3F3F3; width:100%}
    .confooterbox{width:100%; max-width:640px; margin:0 auto;}
    .confooterbox .confoot{background:#fff; position:fixed; bottom:0;width:100%;max-width:640px; height:50px; z-index:999}
    .confooterbox .confoot ul{ overflow:hidden; padding:5px 0}
    .confooterbox .confoot ul li{ float:left; width:25%;height:40px}
    .confooterbox .confoot ul li img{ display:block; margin:0 auto; width:20px; height:20px;}
    .confooterbox .confoot ul li p{ text-align:center; padding-top:3px}
    .confooterbox .confoot ul li p.on{ color:#ee6d0f}

    .headerbox{width:100%; max-width:640px; margin:0 auto;  }
    .headerbox .header{height:50px;position:fixed;width:100%;max-width:640px;top:0;z-index:9999;border-bottom:1px solid #eee;background:#fff}
    .headerbox .header .headerL{ position:absolute; left:0; top:0; height:50px; padding-left:15px;}
    .headerbox .header .headerL img{ display:block;height:18px;padding-top:16px;}
    .headerbox .header .headerC{ width:100%; height:50px; line-height:50px; text-align:center}
    .headerbox .header .headerC p{ text-align:center; font-size:18px; color:#333}
    .headerbox .header .headerR{position:absolute; right:0; top:0; height:50px; padding-right:15px;}
    .headerbox .header .headerR img{ display:block;height:18px;padding-top:16px;}
    .headerbox .header .headerR{position:absolute; right:0; top:0; height:50px; padding-right:15px;}
    .headerbox .header .headerR a{ color:#fff; font-size:12px; line-height:50px}
    .headerbox .header .headerC0{ width:75%; margin:0 auto; height:50px; line-height:50px; text-align:center;;}
    .headerbox .header .headerC0 .ssdiv{ display:block; width:100%; height:34px; margin:8px 0; background:#f7f7f7; border-radius:4px}
    .headerbox .header .headerC0 .ssdiv input{ float:left; width:80%; border:0; outline:none; height:34px; line-height:34px; color:#999; font-size:14px; background:none; letter-spacing:1px;}
    .headerbox .header .headerC0 .ssdiv img{ float:left; height:24px; margin:5px}
    input::-webkit-input-placeholder{
        color:#999;
    }
    input::-moz-placeholder{   /* Mozilla Firefox 19+ */
        color:#999;
    }
    input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
        color:#999;
    }
    input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
        color:#999;
    }


    .mainWarp{ width:100%;}

    .shopType{width:100%; background:#fff;position: fixed;top:50px;max-width:640px; z-index:99}
    .shopType ul{ overflow:hidden; padding:10px 0}
    .shopType ul li{ float:left; width:25%; text-align:center;height:20px;line-height:20px;border-right:1px solid #eee;box-sizing:border-box;}
    .shopType ul li:last-child{ border-right:0}
    .shopType ul li a{height:100%; font-size:14px; text-align:center; height:20px;  }
    .shopType ul li.on a{ color:#e84260}
    .shopType ul li .pricebtn1{width: 0px;height: 0px;font-size: 0;line-height: 0;border-color: #fff #fff #a5a5a5 #fff;border-width: 0px 4px 4px;display: inline-block;border-style: solid;position: relative;top: -5px;left: 5px;}
    .shopType ul li .pricebtn2{width: 0px;height: 0px;font-size: 0;line-height: 0;display: inline-block;border-style: solid;border-color: #a5a5a5 #fff #fff #fff;border-width:4px 4px 0px;position: relative;top:1px;left: -7px;}
    .shopType ul li img{ height:17px}

    ul.proul{ padding:10px 5px;overflow:hidden;}
    ul.proul li{float:left; width:48%; margin:1%; background:#fff; overflow:hidden; position:relative}
    ul.proul li img{ display:block;width:100%;}
    ul.proul li .tit{ height:44px; line-height:22px; font-size:13px;color:#333;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical; padding:5px 10px;}
    ul.proul li .price{ height:20px; padding:5px 10px 10px; overflow:hidden}
    ul.proul li .price p{color:#e84260; float:left; font-size:16px;}
    ul.proul li .price a{ float:right; display:block; background:#f6f1f1;color:#e84260; font-size:12px; width:46px; height:20px; line-height:20px; text-align:center;border-radius:4px; letter-spacing:1px}

    /*banner*/
    .owl-carousel .owl-wrapper:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
    .owl-carousel{display: none;position: relative;width: 100%;-ms-touch-action: pan-y;}
    .owl-carousel .owl-wrapper{display: none;position: relative;-webkit-transform: translate3d(0px, 0px, 0px);}
    .owl-carousel .owl-wrapper-outer{overflow: hidden;position: relative;width: 100%;}
    .owl-carousel .owl-wrapper-outer.autoHeight{-webkit-transition: height 500ms ease-in-out;-moz-transition: height 500ms ease-in-out;-ms-transition: height 500ms ease-in-out;-o-transition: height 500ms ease-in-out;transition: height 500ms ease-in-out;}
    .owl-carousel .owl-item{float: left;}
    .owl-controls .owl-page,.owl-controls .owl-buttons div{cursor: pointer;}
    .owl-controls {-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
    .owl-carousel  .owl-wrapper,.owl-carousel  .owl-item{-webkit-backface-visibility: hidden;-moz-backface-visibility:    hidden;-ms-backface-visibility:     hidden;-webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0);}
    #owl-demo { position: relative; width: 100%; margin-left: auto; margin-right: auto;}
    #owl-demo .item{ position: relative; display: block;}
    #owl-demo img { display: block; width: 100%;}
    #owl-demo b { position: absolute; left: 0; bottom: 0; width: 100%; height: 78px; background-color: #000; opacity: .5; filter: alpha(opacity=50);}
    #owl-demo span { position: absolute; left: 0; bottom: 37px; width: 100%; font: 18px/32px "微软雅黑","黑体"; color: #fff; text-align: center;}
    .owl-pagination { position: absolute; left: 0; bottom: 2px; width: 100%; height: 22px; text-align: center;}
    .owl-page { display: inline-block; width:10px; height: 10px; margin: 0 5px; background:#FFF; *display: inline; *zoom: 1; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}
    .owl-pagination .active { background:#FFC000;}
    .owl-buttons { display: none;}
    .owl-buttons div { position: absolute; top: 50%; width: 24px; height: 48px; margin-top: -40px; text-indent: -9999px;}


    .part6Box{}
    .part6Box .part6_0{ position:absolute; top:15px; width:45px; height:45px; border-radius:100%; background:rgba(51,51,51,0.4); z-index:99}
    .part6Box .part6_1{ left:15px;}
    .part6Box .part6_2{right:15px;width:45px;}
    .part6Box img{ width:28px; height:28px; margin:8px}
    .detail_1{ padding:10px 15px; border-bottom:10px solid #e8e8e8}
    .detail_1 .detail_1_1{ }
    .detail_1 .detail_1_1 .tit{ float:left; width:80%; font-size:14px; color:#141414; height:50px; line-height:24px;}
    .detail_1 .detail_1_1 .img{ width:50px;float:right; height:30px; text-align:center; border-left:1px solid #cfcfcf}
    .detail_1 .detail_1_1 .img img{  width:20px; margin-top:5px}
    .detail_1 .detail_1_2{ padding-top:5px; height:30px; line-height:30px;}
    .detail_1 .detail_1_2 .tit1{ float:left; margin-right:30px; color:#666666; font-size:12px;}
    .detail_1 .detail_1_2 .tit1 span{ font-weight:600; font-size:18px; color:#f65a44}
    .detail_1 .detail_1_2 .tit2{ float:left;color:#666666; font-size:12px;}
    .detail_1 .detail_1_3{height:30px; line-height:30px;}
    .detail_1 .detail_1_3 .tit2{ float:left;color:#666666; font-size:12px; margin-right:30px}
    .detail_1 .detail_1_3 .tit2:last-child{ margin-right:0}

    .detail_2{}
    .detail_2 .detail_2_tit{ width:100%; height:40px; line-height:40px; border-bottom:1px solid #e8e8e8}
    .detail_2 .detail_2_tit .tit{ float:left; width:50%; text-align:center; color:#333; font-size:14px}
    .detail_2 .detail_2_tit .on{ background:rgba(51,51,51,0.4); color:#fff}
    .detail_2 .detail_2_con{}
    .detail_2 .detail_2_con .xq1{}
    .detail_2 .detail_2_con .xq2{ padding-bottom:30px; display:none}
    .detail_2 .detail_2_con .xq2 .tit{border-bottom:1px solid #e8e8e8; height:40px; font-size:13px; color:#666666; line-height:40px; padding:0 15px}

    .defooterBox{ width:100%; max-width:640px; margin:0 auto; height:40px; background:#e8e8e8}
    .defooterBox .footer{ width:100%; max-width:640px; position:fixed; bottom:0; height:40px; background:#e8e8e8;font-size:14px;}
    .defooterBox .footer .addgwc{ color:#666;height:40px; line-height:40px; float:left; text-align:center;background:#fdbd35; width:50%}
    .defooterBox .footer .addgwc a{ color:#fff}
    .defooterBox .footer .gobuy{ background:#f65a44; color:#fff;height:40px;line-height:40px;float:left;text-align:center;width:50%}
    .defooterBox .footer .gobuy a{ color:#fff}

    .f_mask{ background:rgba(0,0,0,0.8);height: 100%;width: 100%; position: absolute;top: 0;left: 0;z-index: 9999;}
    .addgwcBox0{width:100%; max-width:640px; margin:0 auto; background:#fff}
    .addgwcBox{width:100%; max-width:640px;position:fixed; bottom:0;  height:0px; z-index:99999; background:#fff;}
    .addgwcBox .div1{ padding-top:10px; position:relative; padding-bottom:15px; border-bottom:1px solid #e8e8e8}
    .addgwcBox .div1 .d1{ float:left; width:70px; padding:0 15px}
    .addgwcBox .div1 .d1 img{ width:70px; height:70px;}
    .addgwcBox .div1 .d2{ flex:1; }
    .addgwcBox .div1 .d2 .tit1{ font-size:12px; color:#333; padding-top:5px}
    .addgwcBox .div1 .d2 .tit1 span{ font-size:18px; color:#f65a44; font-weight:500; padding-right:5px}
    .addgwcBox .div1 .d2 .tit2{ font-size:12px; color:#333; line-height:30px}
    .addgwcBox .div1 .d3{ position:absolute; top:10px;width:25px;right:0}
    .addgwcBox .div1 .d3 img{ width:15px;}
    .addgwcBox .div2{ padding:15px;border-bottom:1px solid #e8e8e8}
    .addgwcBox .div2 .tit{ color:#333; font-size:12px}
    .addgwcBox .div2 .sub{}
    .addgwcBox .div2 .sub a{ display:block;color:#333; font-size:12px; padding:4px 15px; float:left; background:#f0f0f0; border-radius:4px; margin-top:15px; margin-right:15px}
    .addgwcBox .div3{ padding:5px 15px;border-bottom:1px solid #e8e8e8}
    .addgwcBox .div3 .tit{ float:left; color:#333; font-size:12px; height:30px; line-height:30px}
    .addgwcBox .div3 .num{ float:right; width:102px;}
    .addgwcBox .div3 .num .n1{ float:left; width:30px; height:30px; text-align:center; font-size:20px; line-height:30px; background:#f0f0f0; color:#666666}
    .addgwcBox .div3 .num .n2{ float:left; width:30px; height:30px; margin:0 6px}
    .addgwcBox .div3 .num .n2 input{width:30px; height:30px;font-size:16px;text-align:center;box-sizing: border-box; border:1px solid #f0f0f0}
    .addgwcBox .div4{ padding-top:5px}
    .addgwcBox .div4 a{ display:block;width:100%; height:36px; background:#f65a44; font-size:16px; text-align:center; line-height:36px; color:#fff}











    ul.perlistul{ overflow:hidden}
    ul.perlistul li{ float:left; width:50%;border-right:1px solid #eee;box-sizing:border-box;border-bottom:1px solid #eee;}
    ul.perlistul li:nth-child(2n){ border-right:0}
    ul.perlistul li img{ width:40px; height:40px; margin:0 auto; display:block; margin-top:10px}
    ul.perlistul li p{ text-align:center; font-size:14px; line-height:30px; padding-bottom:10px; letter-spacing:1px}


    .gwcbg{ background:#ee712f; width:100%; max-width:640px; height:100px; border-radius:0 0 30px 30px; position:absolute; z-index:-1}
    .header.orang{background:#ee712f;border-bottom:0}
    .header.orang .headerC p{ color:#fff}


    ul.gwcul{ padding:10px; overflow:hidden}
    ul.gwcul li{ background:#fff; width:100%; height:110px; border-radius:10px; padding:10px 0; margin-bottom:10px}
    ul.gwcul li .L{ float:left; margin:5px 10px; width:95px; overflow:hidden}
    ul.gwcul li .L .proimg{width:95px; height: 95px;border: 1px solid #dedede; _display: table;display: table-cell;text-align: center;vertical-align: middle; border:1px solid #eee}
    ul.gwcul li .L .proimg img{vertical-align: middle;max-height: 93px;max-width: 93px;}
    ul.gwcul li .R{ flex:1}
    ul.gwcul li .R .tit{ font-size:14px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical; padding-right:10px; padding-top:5px}
    ul.gwcul li .R .price{ font-size:18px; font-weight:bold; color:#e84260; padding-top:5px}
    ul.gwcul li .R a{ display:inline-block; width:60px; height:30px; line-height:30px; text-align:center; color:#fff; font-size:12px; letter-spacing:1px; background:#108df7; border-radius:5px; float:right; margin-right:10px}



    .ddBox_1{ overflow:hidden; background:#fff; padding-top:25px;}
    .ddBox_1 .L{ float:left;padding-left:10px}
    .ddBox_1 .L img{ width:25px; display:block; margin-top:15px}
    .ddBox_1 .R{ float:left; width:80%; padding-left:10px}
    .ddBox_1 .R p{}
    .ddBox_1 .R p span{ color:#999; padding-left:5px}
    .ddBox_1 .R .con{ padding-top:5px; line-height:1.5}
    .ddBox_2{ padding:10px; overflow:hidden; background:#fff; padding-bottom:0; margin-bottom:10px}
    .ddBox_2 img{ display:block; width:100%}
    .ddBox_3{ background:#fff; }
    .ddBox_3 .dp_top{ padding:5px 10px; overflow:hidden}
    .ddBox_3 .dp_top img{ height:25px; display:block; float:left;}
    .ddBox_3 .dp_top span{ float:left; height:25px; line-height:28px; padding-left:5px; font-size:16px}
    .ddBox_3 .dp_bot{ width:100%; height:90px; overflow:hidden; padding:10px 0}
    .ddBox_3 .dp_bot .L{ float:left; height:90px; width:90px; margin-right:10px}
    .ddBox_3 .dp_bot .L .proimg{width:90px; height: 90px; _display: table;display: table-cell;text-align: center;vertical-align: middle; }
    .ddBox_3 .dp_bot .L .proimg img{vertical-align: middle;max-height: 90px;max-width: 90px;}
    .ddBox_3 .dp_bot .R{ float:left; width:70%}
    .ddBox_3 .dp_bot .R .tit{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical; font-size:14px; line-height:24px}
    .ddBox_3 .dp_bot .R .tit span{ float:right}
    .ddBox_3 .dp_bot .R .price{ color:#ee712f; font-size:16px; font-weight:bold; padding-top:10px; height:32px; line-height:32px}
    .ddBox_3 .dp_bot .R .price span{ float:right; color:#999; font-size:12px}
    .ddBox_3 .dp_bot .R .sub{ color:#fd8f2e; font-size:14px;}
    .ddBox_3 .dp_bot .R .num{float:right; color:#999; font-size:12px}


    .sjbox{ width:100%; overflow:hidden; padding:5px 0}
    .sjbox .L{ float:left; padding-left:15px; height:25px; line-height:25px; font-size:14px}
    .sjbox .R{ float:right; padding-right:15px}
    .sjbox .R .jian{ float:right; border:1px solid #eee; width:25px; height:25px; line-height:25px; text-align:center; font-size:20px;}
    .sjbox .R .n{ float:right; border-bottom:1px solid #eee; border-top:1px solid #eee; width:30px; height:25px; line-height:25px; text-align:center; font-size:14px;}
    .sjbox .R .jia{ float:right; border:1px solid #eee; width:25px; height:25px; line-height:25px; text-align:center; font-size:20px;}



    .ewmbox{ overflow:hidden}
    .ewmbox .tit{ color:#333; font-size:24px; text-align:center; padding:10px 0; padding-top:20px}
    .ewmbox .tipitem4{ width:280px; height:280px; background:#24aa39; margin:0 auto}
    .ewmbox .tipitem4 p{ text-align:center; color:#fff; font-size:16px; line-height:30px; letter-spacing:1px; padding-top:10px}
    .ewmbox .tipitem4 p.t{ font-size:18px; padding-top:15px; padding-bottom:10px}
    .ewmbox .tipitem4 img{ display:block; width:150px; height:150px; margin:0 auto; margin-top:10px}
    .ewmbox .img{ display:block; margin:0 auto; margin-top:10px}

    .pribox{ padding-top:20px; overflow:hidden; padding-bottom:20px}
    .pribox p{ text-align:right; padding-right:15px; font-size:14px; letter-spacing:1px}
    .pribox p span{ color:#fd8f2e; font-size:16px}

    .fbox{ height:60px; background:#f4f4f4; width:100%}
    .footerbox{ width:100%; max-width:640px; margin:0 auto; }
    .footerbox .footbox{background:#fff; position:fixed; bottom:0;width:100%;max-width:640px; height:30px; padding:10px 0; z-index:999}
    .footerbox .footbox a{ display:block; float:right; background:#fe6610; width:90px; height:30px; line-height:30px; text-align:center; color:#fff; font-size:14px; letter-spacing:1px; border-radius:20px; margin-right:15px}
    .footerbox .footbox p{ float:right; padding-right:30px; font-size:14px; height:30px; line-height:30px; letter-spacing:2px}
    .footerbox .footbox p span{ color:#fd8f2e; font-size:16px; letter-spacing:0}



    .payState{ padding-top:40px; overflow:hidden; border-top:1px solid  #f5f5f5}
    .payState_1{ width:50%; margin:0 auto; overflow:hidden}
    .payState_1 img{ display:block; margin:0 auto; width:50%}
    .payState_2{width: 65%;margin: 0 auto; margin-top:90px; height:32px}
    .payState_2 a{display: block;height:30px;width:100px;text-align: center;line-height:30px;border: 1px solid #eee;background: #f9f9f9;font-size:12px;color: #333;border-radius: 3px; float:left}
    .payState_2 a.r{ float:right}

    .myBox{ overflow:hidden; padding:30px 15px; border-bottom:1px solid #ede9ea}
    .myBox .L{ width:80px; float:left; margin-right:10px;}
    .myBox .L img{ display:block; width:70px; height:70px; margin:5px; border-radius:100%;}
    .myBox .C{ float:left; width:50%}
    .myBox .C .tit{ color:#000; height:40px; line-height:40px; font-size:14px}
    .myBox .C .sub{}
    .myBox .R{float:right;}
    .myBox .R img{  display:block; width:14px; margin-top:28px;}

    .mybox_1{ padding:15px; overflow:hidden}
    .mybox_1 ul{ overflow:hidden}
    .mybox_1 ul li{ float:left; width:48%; overflow:hidden; background:#8398a9}
    .mybox_1 ul li:nth-child(2n){ margin-left:4%; background:#f5904a}
    .mybox_1 ul li .l{ float:left; width:65%; padding:15px 0 15px 10px}
    .mybox_1 ul li .l .tit{ color:#fff; font-size:13px;}
    .mybox_1 ul li .l .sub{ color:#fff; line-height:30px; font-size:12px}
    .mybox_1 ul li .r{ float:right; padding-right:10px}
    .mybox_1 ul li .r img{ display:block; width:22px; margin-top:25px}
    .myconbox{ background:#fff; padding:0 15px; overflow:hidden; height:50px; line-height:50px; border-bottom:1px solid #ede9ea}
    .myconbox .L{ float:left; margin-right:5px;}
    .myconbox .L img{ display:block; width:16px; margin-top:17px;}
    .myconbox .C{ float:left;}
    .myconbox .R{ float:right}
    .myconbox .R img{ display:block; width:14px; margin-top:13px;}


    ul.shopUL{ padding:10px;overflow:hidden}
    ul.shopUL li{background:#fff; width:100%; height:200px; border-radius:5px; margin-bottom:10px}
    ul.shopUL li .item_1{ width:100%;overflow:hidden; height:40px; line-height:40px;}
    ul.shopUL li .item_1 img{ float:left; display:block; width:22px; margin-top:9px; margin-left:5px}
    ul.shopUL li .item_1 p{ float:left; font-size:14px; display:block; line-height:40px;}
    ul.shopUL li .item_2{ background:#fafafa; height:100px;}
    ul.shopUL li .item_2 .L{ float:left; width:100px; height:100px; margin-right:10px}
    ul.shopUL li .item_2 .L .proimg{width:98px; height:98px;border: 1px solid #dedede; _display: table;display: table-cell;text-align: center;vertical-align: middle; border:1px solid #eee}
    ul.shopUL li .item_2 .L .proimg img{vertical-align: middle;max-height: 98px;max-width: 98px;}
    ul.shopUL li .item_2 .R{ flex:1;}
    ul.shopUL li .item_2 .R .tit{ font-size:14px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical; padding-right:10px; padding-top:10px}
    ul.shopUL li .item_2 .R .price{ font-size:14px; padding-top:10px}
    ul.shopUL li .item_2 .R .price span{ color:#ff031c; font-weight:bold}
    ul.shopUL li .item_3{ width:100%; overflow:hidden}
    ul.shopUL li .item_3 a{color:#666; text-align:center; height:26px; display:block; line-height:26px; width:80px; margin:10px; letter-spacing:1px; font-size:12px; float:right; margin-left:10px; border-radius:5px; border:1px solid #e8e8e8}

</style>
<body>

    <div class="phoneError"></div>
    <form id="defaultForm" onsubmit="return false">
        <div class="backBox" onclick="javascript:history.back(-1);">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </div>
        <div class="topTitle">
            注册账号
        </div>
        <div class="bigBox regBigBox">
            <div class="passBox form-group">
                <span class="glyphicon glyphicon-qrcode"></span>
                <input type="text" id="number" name="invite" placeholder="请输入邀请号" />
            </div>
            <div class="passBox form-group">
                <span class="glyphicon glyphicon-phone"></span>
                <input type="text" id="userphone" name="phone" placeholder="请输入您的手机号" />
            </div>
            <div class="passBox form-group">
                <span class="glyphicon glyphicon-envelope"></span>
                <input class="code" type="text" name="verificationCode" placeholder="请输入验证码" />
                <button type="button" class="getCode" id="code" style=" background-color: transparent; border: 0px solid transparent; float:right;">获取验证码</button>
            </div>
            <div class="passBox form-group">
                <span class="glyphicon glyphicon-lock"></span>
                <input type="password" name="password" placeholder="请输入密码" />
            </div>
            <div class="passBox form-group">
                <span class="glyphicon glyphicon-lock"></span>
                <input type="password" name="repassword" placeholder="请确认密码" />
            </div>
            <div class="form-group form-group">
                <button type="submit" class="btn btnBox" id="btnBox">
                    提交
                </button>
            </div>
            <div style="margin-left:5%; font-size:12px; color:gray">
                <input id="check" type="checkbox" checked /><span style="margin-left:5%;">我已阅读并同意注册协议</span><span id="zcxy" style="margin-left:5%; color:blue;">《注册协议》</span>
            </div>
            <div class="regBottomBox">
                <a href="Login.html">已有账号，前往登录 ></a>
            </div>
        </div>
    </form>
    <!-- 遮罩层 -->
    <div class="cover">
    </div>
    <!-- 购买协议 -->
    <div class="purchaseAgreement">
        <p>
            注册协议
        </p>
        <p class="content">
            请仔细阅读本协议，“百瑞花苑”将依据以下条件和条款为会员(下称“您”) 提供服务。您在确认页面点击“同意并确认”按钮，将表示您完全同意并接受本协议的全部内容，并同意接受本协议的相应约束。欢迎阅读“百瑞花苑”注册协议(下称“本协议”)。本协议阐述之条款和条件适用于您使用平台所提供的各种服务(下称“服务”)1.平台所提供的各项服务的所有权和运作权属于“百瑞花苑”平台。您必须同意下述所有服务条款并完成注册程序，才能成为“百瑞花苑”平台的正式会员并使用“百瑞花苑”平台提供的各项服务。服务条款的修改权归“百瑞花苑”平台运营商所有。1.1.您至少符合下列条件之一，才能申请成为“百瑞花苑”平台用户，使用本协议的服务;1.2.年满十八周岁，并具有民事权利能力和民事行为能力的自然人;2.根据中国法律、法规成立并合法存在的公司等企业法人、事业单位、社团组织和其他组织。3.无民事行为能力人、限制民事行为能力人以及无经营或特定经营资格的组织不能注册为“百瑞花苑”平台用户的，与平台之间的协议自始无效，平台一经发现，有权立即注销该用户。2.服务内容及修改、中断、终止1.平台服务的具体内容由本平台根据实际情况提供，并对所提供之服务拥有最终解释权。2.平台仅向会员提供服务。您在平台填写账户信息，完成注册后，即成为平台会员。3.平台仅提供平台服务。您为接受平台服务而须置备的相关设备(包括但不限于个人电脑、手机)、相关网络环境(包括但不限于与接入互联网或移动网有关的装置)及所需的费用均由您自行负担。4.鉴于网络服务的特殊性，平台不担保网络服务不会中断，对网络服务的及时性、安全性、准确性也都不作担保。5.平台需要定期或不定期地对提供网络服务的平台或相关的设备进行检修或者维护，如因此类情况而造成的网络服务(包括收费网络服务)在合理时间内的中断，平台无需为此承担任何责任。平台保留不经事先通知为维修保养、升级或其它目的暂停全部或部分的网络服务的权利。6.您使用平台网络服务所存在的风险将完全由您自己承担。您理解并接受下载或通过平台服务的链接及得到的资讯、产品及服务均系平台自动搜录，平台对其合法性概不负责，亦不承担任何法律责任，您自行承担风险，平台不做任何形式的保证。7.平台有权在满足相关法律、法规规定的期限要求之基础上，以提前通知方式，暂时或永久性的调整或终止所提供服务的内容，平台对您和任何第三人均无需承担任何责任。8. 平台有权基于包括但不限于您违反本协议相关约定、违反相关法律、法规规定、依照有权机关的指令等原因，终止为您提供的平台服务。3.帐号及密码1.您注册会员成功后，在平台的注册账号及密码由您负责保管，且不得出借给他人使用;您应当对以您帐号及密码登录平台所进行的所有活动和事件承担相应的法律责任。2.因您个人原因导致平台帐号、密码泄露、被他人非法使用的，平台不承担任何责任;因黑客攻击等不能归责于平台的原因导致的信息泄露，平台不承担任何责任。3.如您发现任何非法使用会员帐号或安全漏洞的情况，请立即与平台联系。4.支付功能1.在您下单后，您可以选择平台的关联方或与平台合作的第三方支付机构(包括环迅支付、银联以及其他不时增加或调整的支付通道，以下称“支付机构”)所提供的支付服务。2.支付功能本身并不收集您的个人信息，但我们需要将您的订单号与交易金额信息与这些支付机构共享以实现其确认您的支付指令并完成支付。3.“关联方”指一方现在或将来控制、受控制或与其处于共同控制下的任何公司、机构以及上述公司或机构的法定代表人。“控制”是指直接或间接地拥有影响所提及公司管理的能力，无论是通过所有权、有投票权的股份、合同或其他被人民法院认定的方式。5.注册信息和隐私保护1.平台将依照国家相关法律、法规之规定，以及为了向您提供更好的服务需求，汇集、整理、保存您的个人信息。您应当配合平台要求，提供相关个人信息。2.您在注册时及注册后，应提供真实、详尽及准确的个人信息资料，并持续更新。因您信息填写不真实、不准确、更新不及时而导致的损失或者其他后果，均由您自行承担。3.您不得将其帐号、密码转让或出借予他人使用。如发现您自己或者他人的帐号遭人非法使用，应立即通知平台。4.平台不对外公开或向第三方提供单个您的注册资料，除非:1.事先获得您的明确授权;
            2.只有透露你的个人资料,才能提供你所要求的产品和服务;3.根据有关的法律、法规要求;4.按照相关政府主管部门的要求;5.为维护平台的合法权益。6.用户权责1. 您有权按照平台规定的程序和要求使用平台向会员提供的各项网络服务，如果您对该服务有异议，可以与平台联系以便得到及时解决。2.您须同意接受平台通过电子邮件或其他方式向会员发送相关商业信息。3.您在使用平台服务时，必须遵守中华人民共和国相关法律、法规的规定，不得利用本服务进行任何违法或不正当的活动，包括但不限于下列行为:1.复制、发布、传播或以其它方式传送含有下列内容之一的信息:1.1.违反宪法所规定的基本原则的;1.2.危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的;1.3.损害国家荣誉和利益的;1.4.煽动民族仇恨、民族歧视、破坏民族团结的;破坏国家宗教政策，宣扬邪教和封建迷信的;散布谣言，扰乱社会秩序，破坏社会稳定的;散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的;1.5.侮辱或者诽谤他人，侵害他人合法权利的;煽动非法集会、结社、游行、示威、聚众扰乱社会秩序的;1.6.以非法民间组织名义活动的;
            1.7.含有虚假、有害、胁迫、侵害他人隐私、骚扰、侵害、中伤、粗俗、猥亵、或其它道德上令人反感的内容;1.8.含有中国法律、法规、规章、条例以及任何具有法律效力之规范所限制或禁止的其它内容的。2.不得利用“百瑞花苑”平台服务从事以下活动:2.1.未经允许，进入计算机信息网络或者使用计算机信息网络资源;2.2.未经允许，对计算机信息网络功能进行删除、修改或者增加;2.3.未经允许，对进入计算机信息网络中存储、处理或者传输的数据和应用程序进行删除、修改或者增加; 2.4.故意制作、传播计算机病毒等破坏性程序;其他危害计算机信息网络安全的行为。3.您违反本协议或相关的服务条款的规定，导致或产生的任何第三方主张的任何索赔、要求或损失，包括合理的律师费，应当由您承担赔偿责任。对此，平台有权视您的行为性质，采取包括但不限于删除您发布信息内容、暂停使用许可、终止服务、限制使用、注销平台帐号、追究法律责任等措施。对恶意注册平台帐号或利用平台帐号进行违法活动、捣乱、骚扰、欺骗其他您以及其他违反本协议的行为，平台有权注销其帐号。同时，平台会视司法部门的要求，协助调查。4.您不得对平台任何部分通过任何方式进行复制、拷贝、出售、转售或用于任何其它商业目的。5.您须对自己在使用平台服务过程中的行为承担法律责任。您承担法律责任的形式包括但不限于:对受到侵害者进行赔偿，以及在平台首先承担了因您的行为导致的行政处罚或侵权损害赔偿责任后，您应给予平台运营公司等额的赔偿。6.知识产权1.平台网站及网站所使用的任何相关软件、程序、内容，包括但不限于作品、图片、档案、资料、网站构架、网站版面的安排、网页设计、经由本网站或广告商向您呈现的广告或资讯，均由本平台或其它权利人依法享有相应的知识产权，包括但不限于著作权、商标权、专利权或其它专属权利等，受到相关法律的保护。未经平台或权利人明示授权，任何人不得修改、出租、出借、出售、散布本网站及本网，站所使用的.上述任何资料和资源，或根据上述资料和资源制作成任何种类物品。2.平台授予您不可转移及非专属的使用权，使您可以通过单机计算机使用本网站的目标代码(以下简称“软件")，但您不得且不得允许任何第三方，复制、修改、创作衍生作品、进行还原工程、反向组译，或以其它方式破译或试图破译源代码，或出售、转让“软件”或对“软件”进行再授权，或以其它方式移转“软件”之任何权利。您同意不以任何方式修改“软件”，或使用修改后的“软件”。3.平台有权在所有由平台提供的功能界面标注“此功能由平台提供”等相关版权信息。4.您不得经由非平台所提供的界面使用本网站。7.其他1.因不可抗力或者其他意外事件，使得本协议的履行不可能、不必要或者无意义的，双方均不承担责任。本协议所称之不可抗力意指不能预见、不能避免并不能克服的客观情况，包括但不限于战争、台风、水灾、火灾、雷击或地震、罢工、暴动、法定疾病、黑客攻击、网络病毒、电信部门技术管制、政府行为或任何其它自然或人为造成的灾难等客观情况。2.本条款及其修订本的有效性、履行和与本条款及其修订本效力有关的所有事宜，将受中华人民共和国法律约束，任何争议仅适用于中华人民共和国法律。3.因本条款所引起的您与平台的任何纠纷或争议，首先应友好协商解决，协商不成的，您在此同意将纠纷或争议提交平台住所地有管辖权的人民法院诉讼解决。4. 您正确提交注册程序所需的资料并确认本协议后，本协议在平台与您之间成立并生效。5.本协议生效前的注册用户只需要使用原用户名及密码登录平台网站，重新接受并确认本协议，即可继续使用平台的服务。6.协议有效期:从您同意本协议或使用平台起至您注销平台服务止。7.平台各相关部门的电子邮箱以在平台官方网站上注明的为准。8.使用平台即表示接受平台服务协议及其所有附件。9.本协议的最终解释权归“百瑞花苑”平台所有。
        </p>
        <div>
        </div>
        <p class="agree">
            同意并确认
        </p>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            // 查看协议
            $("#zcxy").click(function () {
                $(".purchaseAgreement").toggle()
                $(".cover").toggle()
            })
            $(".agree").click(function () {
                $(".purchaseAgreement").toggle()
                $(".cover").toggle()
            })
            $("#check").change(function () {
                if ($("#check")[0].checked == true) {
                    $("#btnBox").attr("disabled", false);
                }
                else {
                    $("#btnBox").attr("disabled", true);
                }
            });
            // $('#defaultForm').bootstrapValidator({
            //     fields: {
            //         invite: {
            //             validators: {
            //                 notEmpty: {
            //                     message: '邀请号不能为空'
            //                 },
            //                 stringLength: {
            //                     min: 6,
            //                     max: 6,
            //                     message: '请输入6位邀请号'
            //                 }
            //             }
            //         },
            //         phone: {
            //             validators: {
            //                 notEmpty: {
            //                     message: '手机号码不能为空'
            //                 },
            //                 stringLength: {
            //                     min: 11,
            //                     max: 11,
r            //                     message: '请输入11位手机号码'
            //                 }
            //             }
            //         },
            //         verificationCode: {
            //             validators: {
            //                 notEmpty: {
            //                     message: '验证码不能为空'
            //                 },
            //                 stringLength: {
            //                     min: 6,
            //                     max: 6,
            //                     message: '请输入6位验证码'
            //                 },
            //             }
            //         }, password: {
            //             validators: {
            //                 notEmpty: {
            //                     message: '密码不能为空'
            //                 },
            //                 stringLength: {
            //                     min: 8,
            //                     max: 16,
            //                     message: '长度必须在8到16之间'
            //                 },
            //                 regexp: {
            //                     regexp: /^[a-zA-Z0-9_\.]+$/,
            //                     message: '用户名只能由字母、数字、点和下划线组成'
            //                 }
            //             }
            //         },
            //         repassword: {
            //             validators: {
            //                 notEmpty: {
            //                     message: '密码不能为空'
            //                 },
            //                 stringLength: {
            //                     min: 8,
            //                     max: 16,
            //                     message: '长度必须在8到16之间'
            //                 },
            //                 identical: {//相同
            //                     field: 'password',
            //                     message: '两次密码不一致'
            //                 },
            //                 regexp: {//匹配规则
            //                     regexp: /^[a-zA-Z0-9_\.]+$/,
            //                     message: '用户名只能由字母、数字、点和下划线组成'
            //                 }
            //             }
            //         }
            //     }
            // });
            var number = getUrlParam('number');
            if (number != null && number != "") {
                $("#number").val(number);
            }
        });
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        }
        $('#code').click(function () {
            if ($("#userphone").val() == "") {
                $('.phoneError').text("请输入手机号");
                var top = ($(window).height() - $('.phoneError').height()) / 2;
                var left = ($(window).width() - $('.phoneError').width()) / 2;
                var scrollTop = $(document).scrollTop();
                var scrollLeft = $(document).scrollLeft();
                $('.phoneError').css({ position: 'absolute', 'top': top + scrollTop, left: left + scrollLeft }).show();
                setTimeout(function () {
                    $('.phoneError').hide();
                }, 2000)
                return;
            }
            $.ajax({
                type: "POST",
                data: { userphone: $("#userphone").val() },
                url: "../../BaseRefWeb.aspx?stype=ISpMemberFun&method=DoSms&type=sp",
                success: function (result) {
                    countDown();
                }
            });
        });
        var cookie = document.cookie;
        var num;
        var interval;
        $(function () {
            if (cookie != "" && cookie.indexOf("countTime") >= 0) {
                num = parseInt(cookie.substring(cookie.indexOf("=") + 1));
                $("#code").text(num + '秒');
                countDown();
            } else {
                num = 60;
            }
        })
        function countDown() {
            var d = new Date();
            d.setTime(d.getTime() + (60 * 1000));
            if (num == 0) {
                num = 60;
            }
            $("#code").attr("disabled", true);
            interval = setInterval(function () {
                num = num - 1
                document.cookie = "countTime" + "=" + num + ";" + "expires=" + d.toUTCString() + ";path=/";
                if (num > 0) {
                    $("#code").text(num + '秒');
                } else {
                    $("#code").text("获取验证码");
                    $("#code").attr("disabled", false);
                    document.cookie = "countTime" + "=" + num + ";" + "expires=" + new Date().toUTCString() + ";path=/";
                    clearInterval(interval);
                }
            }, 1000);
        }
        //提交表单数据
        $('#btnBox').click(function (event) {
            // $('#defaultForm').data('bootstrapValidator').validate(); //启用验证
            // var flag = $('#defaultForm').data('bootstrapValidator').isValid()//验证是否通过true/false
            if (true) {
                $("#defaultForm").ajaxSubmit({
                    type: "post",
                    url: "../../BaseRefWeb.aspx?stype=ISpMemberFun&method=DoRegister&type=sp",
                    dataType: "json",
                    success: function (result) {
                        if (result.success == false) {
                            $('.phoneError').text(result.msg);
                            var top = ($(window).height() - $('.phoneError').height()) / 2;
                            var left = ($(window).width() - $('.phoneError').width()) / 2;
                            var scrollTop = $(document).scrollTop();
                            var scrollLeft = $(document).scrollLeft();
                            $('.phoneError').css({ position: 'absolute', 'top': top + scrollTop, left: left + scrollLeft }).show();
                            setTimeout(function () {
                                $('.phoneError').hide();
                            }, 2000)
                        }
                        else {
                            $('.phoneError').text(result.msg);
                            var top = ($(window).height() - $('.phoneError').height()) / 2;
                            var left = ($(window).width() - $('.phoneError').width()) / 2;
                            var scrollTop = $(document).scrollTop();
                            var scrollLeft = $(document).scrollLeft();
                            $('.phoneError').css({ position: 'absolute', 'top': top + scrollTop, left: left + scrollLeft }).show();
                            setTimeout(function () {
                                $('.phoneError').hide();
                                window.location.href = "Login.html";
                            }, 2000)
                        }
                    }
                });
            }
        });
    </script>

</body>
</html>
